<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index04-箭头函数</title>
</head>
<body>
<input type="button" value="按钮1" id="btn1"/>
<input type="button" value="按钮2" id="btn2"/>
  <script type="text/javascript">
      // 之前的函数表达式的方式
      // let fun = function (){
      //   console.log("我是函数");
      // };

      // fun();
      // 在ES6推出箭头函数，参数列表 => 函数体
      // let fun = () => {
      //   console.log("箭头函数")
      // };
      // fun();

      // 箭头函数的函数体只有一行代码可以将{}省略不写
      // let fun = () => console.log("箭头函数2");
      // fun();

      // 带有一个参数的箭头函数
      // let fun = (a) =>  console.log(a);
      // fun(100);
      // let fun = a => console.log(a);
      // fun(1000);

      // let fun = (a, b) => console.log(a + b);
      // fun(10, 20);

      // 带有返回值的箭头函数
      // let fun = (a, b) => {
      //     let c = a + b;
      //     return c;
      // };
      // let fun = (a, b) => {
      //     return a + b;
      // };
      // 箭头函数有返回值，但是函数体只有一行代码，可以直接将{}和return省略不写
      // let fun = (a, b) => a + b;
      // let result = fun(100, 200);
      // console.log(result);

      // 定时器
      // function showTime(){
      //
      // }
      // setInterval("showTime()", 1000)
      // setInterval(showTime, 1000)
      // setInterval(function(){
      //     console.log(new Date());
      // }, 1000);

      // setInterval(() => {
      //     console.log(new Date());
      // }, 1000);
      
      // 通过示例来感受箭头函数中的this
      // 获取DOM对象
      let btn1 = document.getElementById("btn1");
      let btn2 = document.getElementById("btn2");
      // 绑定单击事件
      // btn1.onclick = function(){
      //     console.log(this); // btn1
      // };
      // btn2.onclick = () => {
      //     console.log(this);    // window
      // };

      // 箭头函数外层有函数
      let person1 = {
          name: 'jack',
          getName(){
              btn1.onclick = () => {
                  console.log(this);// person1
              };
          }
      };
      person1.getName();

      let person2 = {
          name: 'tom',
          getName() {
              btn2.onclick = function(){
                  console.log(this); // btn2
              };
          }
      };
      person2.getName();
  </script>
</body>
</html>